<template>
    <div>
        <Modal width="1200"
               v-model="modal.subDetailsFlag"
               @on-ok="ok"
               :mask-closable="false"
               @on-cancel="cancel"
               :styles="{top: '100px'}"
               :loading="loading"
               title="题目详情">
            <div style="max-height:600px;overflow-y:auto;overflow-x:hidden;">
                <Form v-if="courseDO.subjectDO != null" :label-width="90">
                    <FormItem label="课程名称:">
                        <div style="float: left"><h4>{{courseDO.courseName}}</h4></div>
                        <div style="float: right">
                            <Button size="small" class="mr-lr" @click="IsEditing = true" type="info" icon="md-build">编辑</Button>
                            <transition name="bounce">
                                <Button size="small" class="mr-lr" v-if="IsEditing" @click="reloadSub" type="error" icon="md-arrow-round-back">取消
                                </Button>
                            </transition>
                            <transition  name="bounce">
                                <Button size="small" class="mr-lr" v-if="IsEditing" @click="saveEditSubject" type="success"
                                        icon="md-checkmark">保存
                                </Button>
                            </transition>
                        </div>
                    </FormItem>
                    <FormItem label="题目:">
                        <div v-if="IsEditing">
                            <froala :tag="'textarea'" :config="config"
                                    v-model="courseDO.subjectDO.subTitle"></froala>
                        </div>
                        <div class="fr-view mydiv" v-else v-html="courseDO.subjectDO.subTitle"></div>
                    </FormItem>
                    <FormItem v-if="courseDO.subjectDO.options.length>0" label="选项:">
                        <div v-if="IsEditing">
                            <div v-for="item in courseDO.subjectDO.options">
                                <froala :tag="'textarea'" :config="config"
                                        v-model="item.optionInfo"></froala>
                            </div>
                        </div>
                        <div v-else class="mydiv">
                            <div class="fr-view" v-for="items in courseDO.subjectDO.options"
                                 v-html="items.optionInfo"></div>
                        </div>
                    </FormItem>
                    <FormItem label="类型:">
                        <div class="fr-view mydiv" v-html="courseDO.subjectDO.codeDO.codeName"></div>
                    </FormItem>
                    <FormItem v-if="courseDO.subjectDO.subAnswer!=null" label="答案:">
                        <div v-if="IsEditing">
                            <froala :tag="'textarea'" :config="config"
                                    v-model="courseDO.subjectDO.subAnswer"></froala>
                        </div>
                        <div class="fr-view mydiv" v-else v-html="courseDO.subjectDO.subAnswer"></div>
                    </FormItem>
                    <FormItem v-if="courseDO.subjectDO.subAnsweranalysis!=null" label="解析:">
                        <div v-if="IsEditing">
                            <froala :tag="'textarea'" :config="config"
                                    v-model="courseDO.subjectDO.subAnsweranalysis"></froala>
                        </div>
                        <div class="fr-view mydiv" v-else v-html="courseDO.subjectDO.subAnsweranalysis"></div>
                    </FormItem>
                </Form>
            </div>
        </Modal>
    </div>
</template>

<script>
    import "@/assets/css/froala_style.css";
    export default {
        props: {
            modal: {
                subDetailsFlag: false,
                subId: null
            }
        },
        data() {
            return {
                loading: false,
                courseDO: {},
                IsEditing: false,
                IsEdited:false,
                config: {
                    language: 'zh_cn',
                    toolbarInline: false,
                    charCounterCount: false,
                    toolbarVisibleWithoutSelection: true,
                    toolbarButtons: ['fontSize', 'codeView', 'bold', 'italic', 'underline', 'strikeThrough', 'paragraphFormat', 'align',
                                     'formatOL', 'formatUL', 'insertImage', 'undo', 'redo', 'paragraphStyle', 'insertHR', 'quote',
                                     'lineHeight', 'clearFormatting', 'inlineStyle', 'inlineClass', 'superscript', 'subscript'],
                    events: {
                        initialized: function () {
                        }
                    }
                },
            }
        },
        methods: {
            ok() {

            },
            cancel() {

            },
            /**
             * 取消
             */
            reloadSub() {
                this.IsEditing = false
                this.getSubjectById()
            },
            /**
             * 保存编辑
             */
            getSubjectById() {
                this.http.get(`/qB/getSubjectById/${this.modal.subId}`).then(res => {
                    if (res.data) {
                        this.courseDO = res.data
                    }
                })
            },
            /**
             *保存编辑信息
             */
            saveEditSubject(){
                this.IsEditing = false
                this.http.put(`/qB/saveEditSubject`,this.qs.parse(this.courseDO.subjectDO)).then(res=>{
                    if(res.data){
                        this.$parent.getAllSubject()
                        this.$Message.success("保存成功")
                    }
                })
            }
        },
        watch: {
            'modal.subDetailsFlag'(flag) {
                //清除页面上的旧数据
                Object.assign(this.$data, this.$options.data())
                if (flag) {
                    this.getSubjectById()
                }
            }
        }
    }
</script>

<style scoped>
    .mydiv {
        background-color: #eeeeee;
        border-radius: 5px;
        padding: 8px;
        margin-right: 10px;
    }
</style>
